<template>
  <view class="site-item">
    <rice-swipe-action ref="swipeItem">
      <rice-swipe-action-item
        v-for="(item, index) in dataList"
        :key="index"
        :customStyle="{ marginBottom: '20rpx' }"
      >
        <template #right v-if="!props.isDisabled">
          <view class="slot-button-customize" @click="bindClick(item)">
            <up-icon name="trash-fill" color="#ffffff" size="28"></up-icon>
          </view>
        </template>
        <view class="content-box" @click="contentClick(item)">
          <view class="site-item-detail">
            <view class="site-item-detail-isBind" v-if="props.isShowBindType">
              {{ !item.bind ? t("dashboard.alreadyBind") : "" }}
            </view>
            <view class="header">
              <view class="left">
                <text> {{ item.siteName }} </text>
                <template v-if="item.siteStatus == 'Online'">
                  <image src="/static/signal-success.png" mode="" />
                </template>
                <template v-if="item.siteStatus == 'Offline'">
                  <image src="/static/signal-err-warning.png" mode="" />
                </template>
              </view>
              <!-- 运行1 空闲0 故障-1 -->
              <view
                class="right"
                :class="
                  item.workStatusType == -1
                    ? 'fault'
                    : item.workStatusType == 0
                    ? 'freeTime'
                    : item.workStatusType == 1
                    ? 'run'
                    : ''
                "
              >
                {{ item.workStatus }}
              </view>
            </view>
            <view class="content">
              <image
                class="site-item-detail-image"
                :src="item.picture"
                mode=""
              />
              <view class="content-right">
                <view class="content-right-item">
                  <view class="content-right-left-item">
                    <view class="content-right-left-item-name">
                      <!-- 装机容量 -->
                      {{ t("dashboard.installedCapacity") }}
                      :
                      {{ item.capacity }}kWh
                    </view>
                    <!-- <view></view> -->
                  </view>
                  <view class="content-right-left-item">
                    <view>
                      <!-- 装机功率 -->
                      {{ t("dashboard.installedPower") }}
                      :
                      {{ formatPower(item.power) }}
                    </view>
                    <!-- <view>{{ formatPower(item.power) }}</view> -->
                  </view>

                  <view class="content-right-left-item">
                    <view class="content-right-left-item-name">
                      <!-- 总充电量 -->
                      {{ t("dashboard.totalCharge_util") }}
                      :
                      {{ formatElectricity(item.cumulativeCharge) }}
                    </view>
                    <!-- <view></view> -->
                  </view>
                  <view class="content-right-left-item">
                    <view>
                      <!-- 总放电量 -->
                      {{ t("dashboard.totalDischarge_util") }}
                      :
                      {{ formatElectricity(item.cumulativeDischarge) }}
                    </view>
                    <!-- <view>
                      
                    </view> -->
                  </view>
                </view>

                <!-- <view class="content-right-item at-right">
                  
                </view> -->
              </view>
            </view>

            <view class="bottom-description">
              <view class="time">
                <!-- 建站时间 -->
                {{ t("dashboard.theTimeTheSiteWasBuilt") }}:
                {{ item.createTime }}
              </view>
              <view class="positioning" v-if="item.location">
                <image src="/static/dashboard/positioning-icon.png" mode="" />
                <text>
                  <!-- 位置 -->
                  {{ t("dashboard.location") }}: {{ item.location }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </rice-swipe-action-item>
    </rice-swipe-action>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { formatPower, formatElectricity } from "@/utils/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  isDisabled: {
    type: Boolean,
    default: () => false,
  },
  dataList: {
    type: Array,
    default: () => [],
  },
  isShowBindType: {
    type: Boolean,
    default: () => false,
  },
});
const swipeItem = ref(null);
const options = ref([
  {
    text: t("dashboard.unbinding"),
  },
]);

const emit = defineEmits(["unbinding", "lookSiteDetail"]);

const bindClick = (e) => {
  emit("handleUnbinding", e);
  console.log("swipeItem", swipeItem);
  swipeItem.value.closeAll();
};

const contentClick = (item) => {
  emit("lookSiteDetail", item);
};
</script>

<style lang="scss" scoped>
.site-item {
  width: 100%;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  :deep(.uni-swipe) {
    margin-bottom: 20rpx;
  }
  .slot-button-customize {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 108rpx;
    height: 100%;
    padding: 0;
    border-radius: 15rpx;
    margin-left: 20rpx;
    font-size: 28rpx;
    font-weight: 500;
    background: #fa3b3d !important;
    color: #ffffff;
    border-radius: 10rpx;
    z-index: 999;
  }
  .site-item-detail {
    width: 100%;
    padding: 50rpx 32rpx 32rpx 32rpx;
    box-sizing: border-box;
    background-color: #132034;
    border-radius: 15rpx;
    position: relative;
    overflow: hidden;
    .site-item-detail-isBind {
      background-color: #2ea752;
      // width: 80rpx;
      font-size: 18rpx;
      font-weight: 500;
      text-align: center;
      padding: 2rpx;
      box-sizing: border-box;
      position: absolute;
      right: 0;
      top: 0;
    }
    .header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      .left {
        width: 50%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text {
          font-family: Alibaba PuHuiTi 3;
          font-size: 32rpx;
          font-weight: 500;
          font-variation-settings: "opsz" auto;
          color: #f8f8f8;
          margin-right: 30rpx;
        }
        image {
          width: 34rpx;
          height: 34rpx;
        }
      }
      .right {
        padding: 6rpx 10rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
        font-size: 24rpx;
      }

      .fault {
        background: #412636;
        color: #fa3b3d;
      }
      .freeTime {
        background: #351a5d;
        color: #bf00ff;
      }
      .run {
        background: #19423c;
        color: #34c759;
      }
    }
    .content {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .site-item-detail-image {
        width: 220rpx;
        height: 160rpx;
        border-radius: 10rpx;
        margin-right: 30rpx;
      }
      .content-right {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        .content-right-item {
          width: 100%;
          margin-right: 30rpx;
          .content-right-left-item {
            width: 100%;
            margin-bottom: 16rpx;
            // border-right: 1rpx solid #222e41;
            font-family: Alibaba PuHuiTi 3;
            font-size: 24rpx;
            font-variation-settings: "opsz" auto;
            color: #ffffff;
            .content-right-left-item-name {
              margin-bottom: 10rpx;
            }
          }
        }
        .at-right {
          margin: 0;

          .content-right-left-item {
            border: none;
          }
        }
      }
    }

    .bottom-description {
      width: 100%;
      margin-top: 24rpx;
      .time {
        font-family: Alibaba PuHuiTi 3;
        font-size: 24rpx;
        font-variation-settings: "opsz" auto;
        color: #bfbfbf;
      }
      .positioning {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 24rpx;
        image {
          width: 22rpx;
          height: 28rpx;
          margin-right: 13rpx;
        }
        text {
          width: 100%;
          white-space: nowrap; /* 禁止文本换行 */
          overflow: hidden; /* 超出部分隐藏 */
          text-overflow: ellipsis; /* 超出部分显示省略号 */
          font-family: PingFang;
          font-size: 24rpx;
          font-weight: normal;
          color: #bfbfbf;
        }
      }
    }
  }
}
</style>
